<template>
    <div class="search">
        <SearchInput @input='input' :item='placeholder' :value='value' @enter='enter'></SearchInput>
        <div class="suggestlist" v-show="suggestshow">
            <ul> 
                <router-link v-for="(item,index) in suggestlist" :key='index' :to='{query:{keyword:item.value}}' @click="suggestshow=false">
                    <li>
                        {{item.value}}
                    </li>
                </router-link>
            </ul>
        </div>
        <SearchResult :keyword='keyword' :index='keyword'  v-if="keyword&&resultshow"></SearchResult>
        
        <block v-show='!keyword||keyword==""'>
            <div class="trend">
            <span class="title">大家都在搜</span>
            <ul class="tags">
                <li v-for="(item,index) in trend" :key="index">
                    <router-link :to="{query:{keyword:item.keyword}}">
                        {{item.keyword}}
                    </router-link>
                </li>
            </ul>
            </div>
            <div class="history">
                <span class="title">历史搜索</span>
                <ul>
                    <li v-for='(item,index) in history' :key='index'>
                        <router-link class="icon-History" :to="{query:{keyword:item}}">
                            {{item}}
                        </router-link>
                    </li>
                </ul>
                <span class="clear title" @click="clear" v-show="history.length">清除历史记录</span>
            </div>
        </block>
    </div>
</template>

<script>
import SearchInput from '../components/common/SearchInput'
import SearchResult from './SearchResult'
export default {
    components:{
        SearchInput,
        SearchResult
    },
    data(){
        return{
            trend:[],
            history:[],
            placeholder:{},
            value:this.$route.query.keyword?this.$route.query.keyword:'',
            result:{},
            keyword:this.$route.query.keyword,
            suggestlist:[],
            suggestshow:false,
            resultshow:true,
        }
    },
    watch:{
        value(now){
            if(now==''){
                this.resultshow=false
            }
        },
        '$route.query.keyword'(now){
            this.suggestshow=false
            this.keyword=now
            this.resultshow=true
            this.value=now
            if(now){
                if(this.history.filter(res=>{
                    return res==now
                })){
                    for(var i=0;i<this.history.length;i++){
                        if(this.history[i]==now){
                            this.history.splice(i,1)
                            break
                        }
                    }
                }
                if(this.history.length==8){
                    this.history.splice(7,1)
                }
                this.history=[...[now],...this.history]
                sessionStorage.setItem('history',this.history)
                console.log(this.history)
            }
            
        }
    },
    methods:{
        clear(){
            this.history=[],
            sessionStorage.setItem('history','')
        },
        enter(v){
            this.$router.replace({path:'/search',query:{keyword:v}})
        },
        input(v){
            this.resultshow=false
            this.suggestshow=true
            this.value=v
            if(v==''){
                this.suggestshow=false
            }
            else{
                this.suggestshow=true
                this.$axios.get('/search/main/suggest',{
                    params:{
                        func:"suggest",
                        suggest_type:"accurate",
                        sub_type:"tag",
                        main_ver:"v1",
                        highlight:"",
                        bangumi_acc_num:3,
                        special_acc_num:0,
                        upuser_acc_num:0,
                        tag_num:10,
                        term:v
                    }
                }).then(res=>{this.suggestlist=res.data.result.tag})
            }
        }
    },
    mounted(){
        this.history=[]
        if(sessionStorage.getItem('history')){
            this.history=sessionStorage.getItem('history').split(',')
            console.log(this.history)
        }
        console.log(sessionStorage.getItem('history'))
        this.$axios.get('/search/main/hotword').then(res=>{
            this.trend=res.data.list.slice(0,6)
        })
        this.$axios.get('/static/x/web-interface/search/default').then(res=>{
            this.placeholder=res.data.data
        })
    }
}
</script>

<style lang='less' scoped>
@import "../assets/css/common";
@import "../assets/css/iconfont";
.search{
    font-size: 1.18rem;
    color: #333;
    .suggestlist{
        background-color: #f4f4f4;
        width: 100%;
        height: 94vh;
        position: fixed;
        z-index: 4;
        *{
            background-color:transparent;
        }
        ul{
            li{
                height: 3.6rem;
                line-height: 3.6rem;
                margin-left: 1rem;
                font-size: 1.1rem;
                border-bottom: 1px solid #ccc;
            }
        }
    }

    .title{
        color: #999;
        display: block;
        margin-bottom:  1rem;
    }
    .trend{
        background-color: #fff;
        padding-top: 1.8rem;
        padding-left: 4vw;
        ul{
            display: flex;
            flex-wrap: wrap;
            li{
                a{
                    color: #333;
                }
                border: 1px solid #ccc;
                border-radius: 2rem;
                font-size: 1.08rem;
                padding: 0.6rem 1.1rem;
                margin: 0 1rem 1rem 0;
            }
        }
        padding-bottom: 1rem;
    }
    .history{
        background-color: #fff;
        padding-left: 4vw;
        position: absolute;
        bottom: 0;
        top: 32vh;
        width: 100%;
        padding-top: 1.3rem;
        .clear{
            text-align: center;
            padding-right: 4vw;
            height: 3.5rem;
            line-height: 3.5rem;
        }
        li{
            a{
                color: #333;
                display: flex;
                height: 3.5rem;
                line-height: 3.5rem;
                border-bottom: 1px solid #ccc;
                &.icon-History:before{
                    padding-right: 1rem;
                    color: #999;
                    font-size: 1.35rem;
                    padding-right: 0.8rem;
                }
                
            }
        }
    }
}
</style>